<template>
   <div class="persnal">
      <!-- 头部标题组件 -->
      <HeaderTop title="个人详情">
         <span
            slot="left"
            class="iconfont icon-jiantou2"
            @click="$router.back()"
         ></span>
      </HeaderTop>
      <!-- 用户信息 -->
      <div class="content">
         <div class="detail">
            <img :src="userInfo.pic" alt="" />
            <ul class="block">
               <li>昵称：{{userInfo.nickname || '待完善'}}</li>
               <li>手机：{{userInfo.phone || '待完善'}}</li>
               <li>邮箱：{{userInfo.email || '待完善'}}</li>
            </ul>
         </div>
      </div>
      <!-- 信息编辑框 -->
      <van-popup v-model="showEditBox" position="top" :style="{ height: '27%' }" >
         <div class="edit-title">
            <span>编辑信息</span>
            <van-icon name="close" @click="cancel"/>
         </div>
         <section class="edit-box">
            <!-- 用户头像 -->
            <div class="user-avatar">
               <van-uploader v-model="fileList" :max-count="1" :after-read="afterRead"/>
            </div>
            <!-- 用户基本信息 -->
            <form class="user-base-info" @submit.prevent="dosubmit">
               <p><span>昵称:</span><input id="edit-nickname" type="text" v-model="editInfo.nickname" minlength="2" maxlength="11"></p>
               <p><span>手机:</span><input type="text" pattern="^1[2-9][0-9]{9}" v-model="editInfo.phone"></p>
               <p><span>邮箱:</span><input type="text" v-model="editInfo.email"></p>
               <!-- 操作栏 -->
               <div class="btns">
                  <div class="cancel-btn" @click="cancel">取消</div>
                  <button type="submit" class="submit-btn">提交</button>
               </div>
            </form>
         </section>
      </van-popup>
      <!-- 操作按钮 -->
      <section class="btns">
         <!-- 编辑按钮 -->
         <div class="edit-info" @click="editor">编辑信息</div>
         <!-- 退出登陆组件 -->
         <div class="logout">
            <Logout />
         </div>
      </section>
   </div>
</template>

<script>
import HeaderTop from "@/components/HeaderTop/HeaderTop"
import Logout from "@/components/Logout/Logout"
//vuex
import { mapState, mapActions } from "vuex"
//ajax
import { updateUserBaseInfo } from '@/api/ajax'
//vant
import { Toast } from 'vant'

export default {
   name: "Personal" /* 个人详情页面 */,
   data() {
      return {
         showEditBox: false, // 是否显示信息编辑框
         editInfo: { // 编辑区的信息
            nickname: '', // 用户名
            phone: '', // 手机号
            email: '', // 邮箱
            picdata: '', // 上传过来的头像数据
            pictype: '', // 上传的图片类型
            u_id: null // 根据id更新用户数据
         },
         fileList: [], // 显示上传的头像
      }
   },
   components: {
      HeaderTop,
      Logout,
   },
   computed: {
      ...mapState("profile", ["userInfo"]),
   },
   methods: {
      ...mapActions('profile', ['handlerUserCookie']),
      /* 初始化编辑数据 */
      initEditInfo() {
         for (let key in this.userInfo) {
            this.editInfo[key] = this.userInfo[key]
         }
         this.fileList.push({url: this.userInfo.pic})
      },
      /* 清除编辑的数据 */
      clearEditInfo() {
         setTimeout(() => {
            for (let key in this.editInfo) {
               this.editInfo[key] = ''
            }
            this.fileList = []
         }, 200)
      },
      /* 点击编辑信息 */
      editor() {
         this.initEditInfo()
         // 显示信息编辑框
         this.showEditBox = true
      },
      /* 上传头像 */
      afterRead(e) {
         this.editInfo.picdata = e.content
         this.editInfo.pictype = e.file.type.split('/')[1]
      },
      /* 取消提交 */
      cancel() {
         this.showEditBox = false // 影藏编辑区
         this.clearEditInfo()
      },
      /* 提交 */
      dosubmit() {
         // 是否修改个人信息的验证对比
         for (let key in this.editInfo) {
            if (!this.editInfo[key] && key !== 'realname') return Toast('请完整输入个人信息！')
         }
         // 影藏编辑区
         this.showEditBox = false
         // 执行更新用户个人信息操作
         const obj = {
            nickname: this.editInfo.nickname,
            picdata: this.editInfo.picdata,
            phone: this.editInfo.phone,
            email: this.editInfo.email,
            pictype: this.editInfo.pictype,
            u_id: this.userInfo.u_id,
            oldFileName: this.userInfo.pic || this.userInfo.pic.slice(this.userInfo.pic.lastIndexOf('/') + 1)
         }
         updateUserBaseInfo(obj).then(({code}) => {
            if (!code) return Toast.fail('更新失败')
            Toast.success('更新成功')
            // 更新用户状态中的信息数据
            this.handlerUserCookie()
         })
         // 清除编辑框中的旧数据
         this.clearEditInfo()
      },
   }
};
</script>

<style scoped lang="stylus">
@charset "utf-8";
.persnal {
   width: 100vw;
   max-width: 750px;
   height: 100vh !important;
   margin: 0;
   padding: 45px 0 50px;
   box-sizing: border-box;
   background-color: #fff;
   font-family: '微软雅黑';

   .btns { width: 100%; }
   .logout {
      margin-top: .5em;
      margin-bottom: .5em;
   }
   .edit-info {
      width: 100vw;
      max-width: 750px;
      height: 41px;
      text-align: center;
      line-height: 41px;
      color: #fff;
      background: var(--bgsuccess);
      background-image: cover;
      cursor pointer
   }
   .edit-title {
      height: 15%;
      background: var(--theme) var(--bgimg);
      background-image: cover;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      color: rgba(255,255,255,.8);
      .van-icon{cursor: pointer;}
   }
   /* 信息编辑 */
   .edit-box {
      width: 100%;
      max-width: 750px;
      margin: 0 auto;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      /* 用户头像 */
      .user-avatar {
         width: 80px;
         height: 80px;
         margin: 10px 10px 0 0;
         overflow hidden;
      }
      /* 用户基本信息 */
      .user-base-info {
         width: 226px;
         position relative;
         padding-top: 5px;
         font-size: 14px;
         p {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            input {
               flex: 1;
               border-bottom: 1px dashed #666;
               text-indent: 2px;
               margin-left: 6px;
               margin-right: 2px;
            }
         }
         /* 操作栏 */
         .btns {
            width: 100%;
            max-width: 750px;
            padding-left: 1px;
            box-sizing: border-box;
            display: flex;
            
            button, .cancel-btn {
               padding: 3px 4px;
               color: #fff;
               font-size: 12px;
               margin-right: 8px;
               cursor pointer
            }
            button:nth-last-child { margin-right: 0;}
            .cancel-btn {
               background: #d9534f;
               border-color: #d43f3a;
               display: flex;
               align-items: center;
               justify-content: center;
               &:hover{background: #ac2925;border-color: #ac2925;}
            }
            .submit-btn {
               background: #337ab7;
               border-color: #2e6da4;
               &:hover{background: #204d74; border-color: #204d74;}
            }
         }
      }
   }
}

ul {
   flex: 1;
   list-style: none;
   margin-left: .5em;
   padding: 0;
}

ul li {
   margin: 4px 0;
}

header {
   width: 100%;
   height: 3em;
   background-color: #02a774;
   color: white;
}

header p {
   text-align: center;
   line-height: 3em;
}

.content {
   width: 100%;
   box-sizing: border-box;
   background-color: #ffffff;
   display: flex;
}

.detail {
   width: 100%;
   background-color: #ffffff;
   padding: 10px;
   display: flex;
   align-items: center;
   font-size: 14px;
   line-height: 20px;
}

.edit {
   background-color: #ffffff;
   height: 2em;
   width: 100%;
   margin-top: 10em;
   clear: both;
}

.login-out {
   background-color: #ffffff;
   height: 2em;
   width: 100%;
   margin-top: 5em;
   margin-bottom: 0.5em;
}

.footer {
   width: 100%;
   height: 2em;
   background-color: rgb(75, 75, 75);
}

.detail > img {
   width: 102px;
   border: 1px solid grey;
}

a {
   text-decoration: none;
   display: inline-block;
   height: 2em;
   text-align: center;
   width: 100%;
   line-height: 2em;
   color: black;
}

.block {
   display: inline-block;
   word-wrap: break-word;
}
.back {
   position: absolute;
   top: 5px;
   left: 0;
   text-align: left;
}
.icon-arrow_left {
   display: block;
   padding: 5px;
   font-size: 20px;
   color: #fff;
}
</style>